import { useState } from "react";
import Card from "../Card/Card";
import "./LogsForm.css";

const LogsForm = (props) => {
  // 定义存放数据的state
  const [formData, setformData] = useState({
    date: "",
    desc: "",
    time: "",
  });

  const dateChangeHandler = (event) => {
    setformData({
      ...formData,
      date: event.target.value,
    });
  };

  const descChangeHandler = (event) => {
    setformData({
      ...formData,
      desc: event.target.value,
    });
  };

  const timeChangeHandler = (event) => {
    setformData({
      ...formData,
      time: event.target.value,
    });
  };

  // 表单的提交事件
  const formSubmitHandler = (event) => {
    // 阻止表单默认提交事件
    event.preventDefault();
    const studyData = {
        ...formData,
        month: new Date(formData.date).toLocaleDateString('zh-CN', {month: 'long'}),
        day: new Date(formData.date).getDate()
    }
    props.addData(studyData)

    setformData({
      date: "",
      desc: "",
      time: "",
    });
  };

  return (
    <Card className="logs-form">
      <form onSubmit={formSubmitHandler}>
        <ul>
          <li className="form-item">
            <label htmlFor="date">日期</label>
            <input
              type="date"
              onChange={dateChangeHandler}
              value={formData.date}
              id="date"
            />
          </li>
          <li className="form-item">
            <label htmlFor="desc">内容</label>
            <input
              type="text"
              onChange={descChangeHandler}
              value={formData.desc}
              id="desc"
            />
          </li>
          <li className="form-item">
            <label htmlFor="time">时长</label>
            <input
              type="number"
              onChange={timeChangeHandler}
              value={formData.time}
              id="time"
            />
          </li>
          <li className="form-btn">
            <button>添加</button>
          </li>
        </ul>
      </form>
    </Card>
  );
};

export default LogsForm;
